<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<title>Management Page</title>
		<link rel="stylesheet" href="../jslib/bootstrap/css/bootstrap.min.css">
		<script src="../jslib/jquery/jquery-2.1.4.min.js"></script>
		<script src="../jslib/bootstrap/js/bootstrap.min.js"></script>
		<script src="../jslib/ukulele/ukulele.js"></script>
		<script src="../js/Activity.js"></script>
	</head>
	<body uku-application>
		<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#createModal">
			Create New Activity
		</button>
		<h4>All Acticities</h4>
		<table class="table table-bordered table table-hover table-condensed">
			<thead>
				<tr>
					<th>Name</th>
					<th>Start Date</th>
					<th>End Date</th>
					<th>Joined Users</th>
					<th>Status</th>
					<th>Action</th>
				</tr>
				<tbody>
					<tr uku-repeat="activity in mgr.activities">
						<td>{{activity.name}}</td>
						<td>{{activity.startDateLabelFunc()}}</td>
						<td>{{activity.endDateLabelFunc()}}</td>
						<td>{{activity.users.length}}</td>
						<td>{{activity.status}}</td>
						<td>
						<button class="btn btn-default" uku-onclick="parent.mgr.setEditActivity(activity)">
							Edit
						</button>
						<button class="btn btn-default" uku-onclick="parent.mgr.removeActivity(activity._id)">
							Delete
						</button></td>
					</tr>
				</tbody>
			</thead>
		</table>
		<!--Create Modal -->
		<div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="createModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="createModalLabel">Create Activity</h4>
					</div>
					<div class="modal-body">
						<form>
							<div class="form-group">
								<label for="nameInput">Activity Name</label>
								<input type="text" class="form-control" id="nameInput" placeholder="Enter the new activity name" uku-value="mgr.newActivity.name">
							</div>
							<div class="form-group">
								<label for="startDateInput">Start Date</label>
								<input type="date" class="form-control" id="startDateInput" uku-value="mgr.newActivity.startDate">
							</div>
							<div class="form-group">
								<label for="endDateInput">End Date</label>
								<input type="date" class="form-control" id="endDateInput" uku-value="mgr.newActivity.endDate">
							</div>
							<div class="form-group">
								<label for="limitInput">Limit</label>
								<input type="number" min="1" class="form-control" id="limitDateInput" uku-value="mgr.newActivity.limit">
							</div>
							<div class="form-group">
								<label for="statusInput">Status</label>
								<select uku-value="mgr.newActivity.status">
								  <option uku-repeat="status in mgr.statusEnum" uku-value ="status.value">{{status.name}}</option>
								</select>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">
							Close
						</button>
						<button type="button" class="btn btn-primary" uku-onclick="mgr.createActivity()">
							Create
						</button>
					</div>
				</div>
			</div>
		</div>
		<!--Edit Modal-->
		<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="editModalLabel">Create Activity</h4>
					</div>
					<div class="modal-body">
						<form>
							<div class="form-group">
								<label for="editNameInput">Activity Name</label>
								<input type="text" class="form-control" id="editNameInput" placeholder="Enter the new activity name" uku-value="mgr.editActivity.name">
							</div>
							<div class="form-group">
								<label for="editStartDateInput">Start Date</label>
								<input type="date" class="form-control" id="editStartDateInput" uku-value="mgr.editActivity.startDateLabelFunc()">
							</div>
							<div class="form-group">
								<label for="editEndDateInput">End Date</label>
								<input type="date" class="form-control" id="editEndDateInput" uku-value="mgr.editActivity.endDateLabelFunc()">
							</div>
							<div class="form-group">
								<label for="editLimitDateInput">Limit</label>
								<input type="number" min="1" class="form-control" id="editLimitDateInput" uku-value="mgr.editActivity.limit">
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">
							Close
						</button>
						<button type="button" class="btn btn-primary" uku-onclick="mgr.updateActivity()">
							Modify
						</button>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		function ManagementController() {
			this.activities = [];
			var self = this;
			this.getActivites = function() {
				$.get("/activity", function(data) {
					var arr =[];
					for(var i=0;i<data.length;i++){
						var actvity = new Activity();
						actvity.convertModel2Entity(data[i]);
						arr.push(actvity);
					}
					self.activities = arr;
				});
			};
			this.createActivity = function() {
				$.post("/activity", self.newActivity, function(data) {
					$('#createModal').modal('hide');
					self.getActivites();
				});
			};
			this.newActivity = new Activity;
			this.editActivity = undefined;
			this.removeActivity = function(id) {
				$.ajax({url: "/activity/"+id,type:"DELETE",success:function(){
					self.getActivites();
				}});
			};
			this.setEditActivity = function(activity){
				this.editActivity = activity;
				this.editActivity.startDate = activity.startDate.split("T")[0];
				$('#editModal').modal('toggle');
			};
			this.statusEnum = [{"name":"pending","value":"pending"},
							{"name":"running","value":"running"},
							{"name":"suspended","value":"suspended"},
							{"name":"over","value":"over"}];
		}


		$(document).ready(function() {
			var uku = new Ukulele();
			var mgr = new ManagementController();
			uku.registerController("mgr", mgr);
			mgr.getActivites();
			uku.init();
		});

	</script>
</html>